<script setup>
import { onMounted } from "vue";
import NavBar from "@/components/NavBar/index.vue";
import TabBar from "@/components/TabBar/index.vue";
import CountDown from "@/components/CountDown/index.vue";
import DragableCustomerButton from "@/components/DragableCustomerButton/index.vue";

function navigateToHome() {
  uni.navigateBack();
}

function navigateToOrderPay() {
	console.log('click pay!');
}
</script>

<template>
  <div class="container">
    <NavBar></NavBar>
    <div @click="navigateToHome" class="back-nav">
      <image
        src="@/static/icon/chevron-left.png"
        style="width: 14px; height: 14px"
      ></image>
      <text>订单</text>
    </div>
		<div class="main-container">
			<div class="count">¥3000</div>
			<div class="remain-time">剩余时间：</div>
			<CountDown></CountDown>
		</div>
		<div class="discount-card">
			<image
			  src="@/static/icon/rectangle.png"
			  style="width: 8px; height: 8px; margin-top: 4px; margin-right: 8px;"
			></image>
			<text>使用余额抵扣</text>
			<text class="discount-card-detail">您还有3000元余额</text>
		</div>
		<div class="op">
		  <button class="op-btn" @click="navigateToOrderPay">
		    <image
		      src="@/static/icon/weixinzhifu.png"
		      style="width: 18px; height: 18px; margin-right: 8px;"
		    ></image>
				微信支付
		  </button>
		</div>
		<DragableCustomerButton></DragableCustomerButton>
  </div>
</template>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
}

.back-nav {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  margin: 20px 0;
  align-items: center;
  column-gap: 8px;
  font-size: 16px;
}
.main-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.remain-time {
	margin-left: 15px;
}
.count {
	font-size: 24px;
	font-weight: 600;
	margin: 27px 0;
}
.discount-card {
	display: flex;
	
	width: 100%;
	height: 45px;
	padding: 10px 25px 20px;
	
	margin-top: 65px;
	margin-bottom: 22px;
	background-color: #f7fff3;
	border-radius: 10px;
	box-sizing: border-box;
	
	font-size: 12px;
}
.discount-card-detail {
	opacity: 0.5;
	font-size: 12px;
	margin-left: 35px;
}
.op {
  width: 100%;
  position: fixed;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-left: -20px;
  padding: 0 20px;
  box-sizing: border-box;
}

.op-btn {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px 0 0 0;
  font-size: 16px;
  color: #fff;
  background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
  border-radius: 10px;
  box-sizing: border-box;
}
</style>
